<template>
    <n-el >
        <n-space justify="center"  >
            <n-image
                :width="400"
                :src=fileFunction.getViewFilePathByUserFileId(row.imgFileId?row.imgFileId:row.imageUrl)
            />
        </n-space>
    </n-el>
    <n-space   style="margin-top:20px" >
        <n-scrollbar  x-scrollable style="max-height: 80px">
            <div style="white-space: nowrap;" >
                <n-image v-for="storyPaintLog in row.imageList"
                    preview-disabled
                    :width="70"
                    size="small"
                    @click="clickImg(storyPaintLog)"
                    :class="{ 'selected': row.imgFileId=== storyPaintLog }"
                     style="margin-left: 10px;"
                    :src=fileFunction.getViewFilePathByUserFileId(storyPaintLog)
                />
            </div>
        </n-scrollbar>
    </n-space>
    <n-button block type="primary" style="margin-top: 10px;" @click="rechosePic" :loading = "loading">设为本镜图片</n-button>
</template>

<script setup lang="ts">
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {NButton} from "naive-ui";
import {storyController} from '@/api/story/story.api'
import {ref} from "vue";
import {useMessage } from 'naive-ui';


const message = useMessage()
const loading = ref(false)
const props = defineProps({
    row: {
        type: Object,
        default: () => {
            return {}
        }
    },
    selectFunction:{
      type: Function,
      // required: true
      default: (fileId:string) => {

      }
    }
})

const selectImgTaskId = ref(props.row.paintTaskId)

const clickImg = (storyPaintLog:any) => {
    props.row.imgFileId = storyPaintLog
    selectImgTaskId.value = storyPaintLog
}

const rechosePic = () => {
    loading.value = true
    const data = {
        id : props.row.id,
        imageUrl: selectImgTaskId.value
    }
    storyController.updatePic(data).then(res=> {
        loading.value = false
        if (res.code === 200 ) {
            message.success('设置成功')
          props.selectFunction(selectImgTaskId.value)
        } else {
            message.error(res.message)
        }
    })
}
</script>

<style>
.selected {
    border: 3px solid #8250df;
}
</style>
